/*
 * @Description: 
 * @Author: YoungWind
 * @Date: 2020-09-20 19:22:50
 * @LastEditTime: 2020-09-20 20:52:53
 * @LastEditors: YoungWind
 * @FilePath: \ccd3\src\ccd3\BaseChart.js
 */
class CCd3 {
  constructor(id, data) {
    this.id = id;
    this.data = data;
    this.margin = { top: 0, right: 0, bottom: 0, left: 0 };

    this.width = document.querySelector(`#${id}`).offsetWidth;
    this.height = document.querySelector(`#${id}`).offsetHeight;

    this.svg = null;
    this.mg = null;

    this.maxHeight = '100%';
    this.maxWidth = '100%';
    this.backgroundColor = '#eee';
  }

  init() {
    if (new.target == 'CCd3')
      console.error("请在子类中,重写init方法！");
  }

  render() {
    if (new.target == 'CCd3')
      console.error("请在子类中,重写render方法！");
  }

  initSvg() {
    this.svg = d3.select(`#${this.id}`)
      .append('svg');

    this.innerHeight = this.height - this.margin.top - this.margin.bottom;
    this.innerWidth = this.width - this.margin.left - this.margin.right;
    this.viewBox = `0 0 ${this.width} ${this.height}`; //响应式视图盒子

    this.svg
      .attr('id', `${this.id}svg`)
      .attr('viewBox', this.viewBox)
      .style('background-color', this.backgroundColor)
      .style('max-height', this.maxHeight)
      .style('max-width', this.maxWidth)
  }

  initMainGroup() {
    this.mg = this.svg.append('g')
      .attr('id', `${this.id}MainGroup`)
      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
  }

  setMargin(top, right, bottom, left) {
    this.margin.top = top;
    this.margin.right = right;
    this.margin.bottom = bottom;
    this.margin.left = left;
    return this;
  }

  setHeight(h) {
    this.height = h;
    return this;
  }

  setWidth(w) {
    this.width = w;
    return this;
  }

  setMaxHeight(mh) {
    this.maxHeight = mh;
    return this;
  }

  setMaxWidth(mw) {
    this.maxWidth = mw;
    return this;
  }

  setBackgroundColor(color) {
    this.backgroundColor = color;
    return this;
  }
}

export default CCd3